<template>
    <view class="login-container">
        <view class="logo-wrapper">
            <image src="https://ordoswh.cn/upload/image/20180601/1527845133130795.jpg" ></image>
        </view>
        <u-form :model="formData" ref="uForm" :labelWidth="labelWidth">
            <u-form-item label="用户名" prop="username">
                <u-input v-model="formData.username" placeholder="请输入用户名"></u-input>
            </u-form-item>
            <u-form-item label="密码" prop="password">
                <u-input v-model="formData.password" placeholder="请输入密码" password></u-input>
            </u-form-item>
        </u-form>
        <u-button @click="handleLogin" type="primary" size="large" shape="circle">登录</u-button>
        <view class="links-wrapper">
            <text @click="forgotPassword">忘记密码</text>
			<text @click="register">没有账号，去注册</text>
        </view>
    </view>
</template>

<script>

export default {
    data() {
        return {
            formData: {
                username: '张三',
                password: 'Mg123456.'
            },
			labelWidth: '60px'
        };
    },
    methods: {
        handleLogin() {
			this.$store.dispatch("user/handleLogin", this.formData).then(res=>{
				uni.switchTab({
					url: '/pages/index/index',
					success: () => {
						console.log('跳转成功');
						this.$store.dispatch("config/getSystemConfig")
					},
					fail: (err) => {
						console.error('跳转失败:', err);
					},
				})
			})
        },
        forgotPassword() {
            console.log('忘记密码操作');
        },
        register() {
            uni.navigateTo({
            	url: '/pages/Register/Register'
            })
        }
    }
};
</script>

<style lang="scss" scoped>
$primary-color: #3d98fc;
$text-color: #333;
$bg-color: #f5f5f5;
$input-bg-color: #fff;
$input-border-color: #bbb;
$input-border-width: 2px;
$input-bottom-border-color: #999;
$input-bottom-border-width: 3px;
$label-width: 80px; // 新增变量设置 label 宽度

.login-container {
    padding: 50px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: $bg-color;
    min-height: 100vh;

    .logo-wrapper {
        width: 200px;
        height: 200px;
        margin-bottom: 50px;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
		
		image {
			height: 100%;
			width: 100%;
			object-fit: contain;
		}
    }

    .u-form {
        width: 100%;
        max-width: 400px;

        .u-form-item {
            margin-bottom: 20px;
            input {
                border: $input-border-width solid $input-border-color;
                border-bottom: $input-bottom-border-width solid $input-bottom-border-color;
                border-radius: 8px;
                padding: 12px 15px;
                font-size: 16px;
                color: $text-color;
                background-color: $input-bg-color;
                transition: border-color 0.3s ease;

                &:focus {
                    border-color: $primary-color;
                    border-bottom-color: $primary-color;
                }
            }
        }
    }

    .u-button {
        width: 100%;
        max-width: 400px;
        margin-top: 30px;
        font-size: 18px;
        letter-spacing: 1px;
        transition: all 0.3s ease;

        &:hover {
            transform: scale(1.02);
        }
    }

    .links-wrapper {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 400px;

        text {
            color: $primary-color;
            text-decoration: underline;
            cursor: pointer;
            transition: color 0.3s ease;

            &:hover {
                color: darken($primary-color, 10%);
            }
        }
    }
}
</style>    